<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Search</title>
    <link href="{% static 'css/index.css' %}" rel="stylesheet">
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
    <script src="{% static 'js/jquery-3.3.1.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/bootstrap.js' %}" type="text/javascript"></script>
</head>
<body>
<div class="jumbotron">
    <div class="row">
        <div class="index">
        <div class="col-lg-offset-3 col-lg-5">
        <div class="container">
            <h1>AmorSearch!</h1>
            <p>The largest IT technology search engine in the world.</p>
            <p>Here you can search for articles, questions and answers related to IT technology.</p>
        </div>
        </div>
        </div>
        <div class="search">
            <div class="col-lg-offset-3 col-lg-5">
                <form method="post" action="{% url 'result' %}">
                    {% csrf_token %}
                    <div class="input-group">
                        <input type="text" name="keyword" class="form-control search-input" aria-label="...">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle"
                                    data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">Go !
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a href="#">Internet</a></li>
                                <li><a href="#">Article</a></li>
                                <li><a href="#">Question</a></li>
                                <li><a href="#">Position</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="input-group">
                        <ul class="data-list list-group"></ul>
                    </div>
                </form>
            </div>
        </div>
        <div class="bottom-message">
            <div class="col-lg-offset-5 col-lg-1">
            <span>©AmorSearch</span>
            </div>
        </div>
    </div>
</div>
<script>
    $('.search-input').bind('input propertychange', function () {
        let tmpHtml = '';
        const suggest = $.ajax({
            type: 'POST',
            url: '{% url 'suggest' %}',
            data: {'key_word': $(this).val()},
            dataType: 'JSON',
            beforeSend:function(xhr, settings){xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");},
        });
        suggest.done(function success(data) {
            data = data['re_data'];
            for (let i=0; i<data.length; i++){
                tmpHtml += '<a href=""><li class="list-group-item">'+ data[i] +'</li></a>';
                console.log(tmpHtml)
            }
            $('.data-list').html('');
            $('.data-list').append(tmpHtml);
        })
    })
</script>
</body>
</html>